<template>
	<div class="">
		<div class="box">
			<div class="title">维保</div>
			<div class="">
				<FormItems
					ref="form"
					v-model="formData"
					:form="formList"
					:state="state"
					labelWidth="120px"></FormItems>
				<!--  -->
				<!-- v-if=" -->
				<!-- notEmpty(formData.maintenanceMealType) && -->
				<!-- details.carSourceType == '2' -->
				<!-- " -->
				<el-table
					class="table"
					:data="formData.maintenanceList"
					border
					v-if="notEmpty(formData.maintenanceMealType)">
					<el-table-column
						label="类别"
						prop="maintenanceItemTypeStr"
						align="center"></el-table-column>
					<el-table-column
						label="保养范围"
						prop="maintenanceItemDetails"
						align="center"></el-table-column>
					<el-table-column
						label="次数"
						prop="maintenanceCount"
						align="center"></el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import FormItem from '@/views/finance/reimburs/formItem/index.vue';
	export default {
		inheritAttrs: true,
		components: { FormItems, FormItem },
		dicts: [
			'quota_maintenance_mileage_type',
			'quota_maintenance_meal',
			'quota_lead_source',
			'main_tenance_item',
			'main_tenance_service',
		],
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
			planDicts: {
				required: false,
			},
			citylist: {
				required: false,
			},
		},
		inject: ['details_forecast', 'details_config'],
		data() {
			return {};
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			config() {
				return this.details_config();
			},
			details() {
				return this.details_forecast();
			},
			index() {
				return 0;
			},
			planList() {
				return this.planDicts || [];
			},
			mainTenanceList() {
				return [
					...this.dict.type.main_tenance_item,
					...this.dict.type.main_tenance_service,
				];
			},
			maintenanceTypeList() {
				let arr = [];
				if (
					this.config?.quotationProductSchemeAttributeOption?.hasMaintenanceOptions?.includes(
						1,
					)
				) {
					arr.push({
						label: '是',
						value: '1',
					});
				}
				if (
					this.config?.quotationProductSchemeAttributeOption?.hasMaintenanceOptions?.includes(
						0,
					)
				) {
					arr.push({
						label: '否',
						value: '2',
					});
				}
				return arr;
			},
			showMaintenanceType() {
				let list =
					this.config?.quotationProductSchemeAttributeOption
						?.hasMaintenanceOptions;
				if (list?.length == 0) {
					return false;
				} else {
					return true;
				}
			},
			maintenanceAnnualMileageKeyList() {
				let arr = [],
					start = 10000,
					end = 80000;
				// let item = this.config?.quotationCustomerTypeIrrList?.find(
				// 	e => e.quotationCustomerTypeId == this.details.customerType,
				// );
				// if (item?.residualValueBusinessType == 1) {
				// 	// 个人
				// 	end = 20000;
				// } else {
				// 	// 企业
				// 	end = 80000;
				// }

				for (let i = start; i <= end; i += 10000) {
					arr.push({
						label: i,
						value: i,
					});
				}
				return arr;
			},
			formList() {
				return [
					{
						label: '年行驶公里数',
						type: 'select',
						selectList: this.maintenanceAnnualMileageKeyList,
						prop: 'maintenanceAnnualMileageKey',
						rules: true,
					},
					{
						label: '是否包含维保',
						prop: 'maintenanceType',
						type: 'radioGroup',
						radioGroupList: this.maintenanceTypeList,
						// 业务来源 == 自营 || 车辆类型不是新车 || （渠道 && 购买类型 == 2）
						show:
							this.maintenanceTypeList?.length > 0 &&
							(this.config?.businessSource == '1' ||
								this.details.carType !== '1' ||
								(this.config?.businessSource == '2' &&
									this.formData.insuranceBuyType == '2')),
						rules: [
							{
								required: true,
								message: '请选择是否包含维保',
								trigger: 'change',
							},
						],
						event: {
							type: 'change',
							cb: row => {
								row.maintenanceSupplierId = undefined;
								row.maintenanceSupplierName = undefined;
								// row.maintenanceMileageType = undefined;
								row.maintenanceMealType = undefined;
								if (row.maintenanceType == '1') {
									// row.maintenanceMileageType = "1";
									if (this.config?.businessSource == '2') {
										// row.maintenanceMileageType = "1";
									}
								}
								if (row.maintenanceType == '2') {
									this.formData.maintenanceList = [];
									this.formData.maintenancePrice = undefined;
									this.formData.planConf.maintenancePrice_state =
										'';
								}
							},
						},
					},
					{
						label: '供应商',
						type: 'select',
						selectList: [
							{
								label: '4s',
								value: 1,
							},
							{
								label: '维修厂',
								value: 2,
							},
						],
						prop: 'maintenanceSupplierId',
						show: this.formData.maintenanceType == '1',
						rules: true,
						event: {
							type: 'change',
							cb: row => {
								row.maintenanceSupplierName =
									row.maintenanceSupplierId == 1
										? '4s'
										: row.maintenanceSupplierId == 2
										? '维修厂'
										: '';
							},
						},
					},
					{
						label: '合同是否限制里程',
						prop: 'maintenanceMileageType',
						type: 'radioGroup',
						radioGroupList:
							this.dict.type.quota_maintenance_mileage_type,
						rules: true,
						state:
							this.type == 'preview'
								? 'readonly'
								: this.config?.businessSource == '2'
								? 'disabled'
								: 'write',
						// show: this.formData.maintenanceType == "1",
					},
					{
						label: '维保套餐',
						prop: 'maintenanceMealType',
						type: 'radioGroup',
						radioGroupList: this.planList.packagelList,
						dictLabel: 'maintenancePackageName',
						dictValue: 'id',
						rules: true,
						// 包含维保 &&  业务来源 == 渠道
						show:
							this.formData.maintenanceType == '1' &&
							this.config?.businessSource == '2',
						event: {
							type: 'change',
							cb: row => {
								let item = this.planList.packagelList?.find(
									e => e.id == row.maintenanceMealType,
								);
								if (item) {
									row.maintenanceMealTypeStr =
										item.maintenancePackageName;
								}
								// this.setMaintenanceList(
								// 	row.maintenanceMealType,
								// );
							},
						},
					},
				];
			},
		},
		created() {
			if (this.Empty(this.formData.maintenanceMileageType)) {
				this.formData.maintenanceMileageType = '1';
			}
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this.$refs.form?.form_resetFields?.();
			}
		},
		watch: {
			'formData.maintenanceMealType': {
				handler(val) {
					let item = this.planList.packagelList?.find(
						e => e.id == val,
					);
					if (item) {
						this.formData.maintenanceMealTypeStr =
							item.maintenancePackageName;
					}
					this.setMaintenanceList(val);
				},
				immediate: true,
			},
		},
		mounted() {},
		methods: {
			setMaintenanceList(maintenanceMealType) {
				let item = this.planList.packagelList.find(
					e => e.id == maintenanceMealType,
				);
				if (item) {
					let list = [];
					for (const [key, value] of Object.entries(
						item.maintenanceServiceMap,
					)) {
						let dictItem = this.mainTenanceList.find(
							e => e.label == value,
						);
						list.push({
							maintenanceItemTypeStr: value,
							maintenanceItemDetails: dictItem?.raw?.remark ?? '',
							maintenanceCount: undefined,
							raw: {
								id: item?.id,
								maintenancePackageName:
									item.maintenancePackageName,
								maintenanceServiceId: key,
								maintenanceServiceName: value,
							},
						});
					}
					this.$set(this.formData, 'maintenanceList', list);
				}
			},
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (
							Object.prototype.toString.call(ref) ==
							'[object Array]'
						) {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(
										ref,
										'form_validate',
									);
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(
									ref,
									'form_validate',
								);
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		margin: 20px;
		padding: 20px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0px 1px 3px 1px rgba(0, 28, 54, 0.11);
		.title {
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-bottom: 15px;
			border-bottom: 1px solid #e9e9e9;
		}
	}
	.table {
		margin-top: 15px;
	}
</style>
